<script setup lang="ts">
const emits = defineEmits<{
  close: [];
}>();

const { bonuses, bonusesAvailableAt } = queries.useBonusesQuery();
</script>

<template>
  <div class="text-sm text-sys-text-body">
    <div class="mb-4 text-sys-text-head">
      {{ $t('mwFqzoxP2Llw3ZlXd5Xih') }}
    </div>
    <div>
      {{ $t('oIuyF1eMxszSeaw1JuQph') }}
    </div>

    <div class="divider-h-gradual my-4" />

    <div>
      {{ $t('0mkyelkkltJ72TYwjuR8') }}:
    </div>
    <I18nT keypath="h25L5Sp2bWhi0E7TnclzN" tag="div" class="mt-1 text-sys-text-head">
      <template #time>
        24
      </template>
    </I18nT>

    <div class="divider-h-gradual my-4" />

    <div>
      {{ $t('feuDq897sKyAeNclMooJn') }} :
    </div>
    <div class="mt-1 text-sys-text-head">
      <span v-if="bonuses?.cashback?.available">{{ $t('zv1dIj3TEeePe8P21InL') }}</span>
      <AStatisticCountdown
        v-else-if="bonusesAvailableAt?.cashback"
        class="ant-cover__StatisticCountdown-inline-inherit"
        :value="bonusesAvailableAt?.cashback"
      />
      <span v-else>{{ $t('zXdm1xMbkLHfy6Lm4jql6') }}</span>
    </div>

    <div class="divider-h-gradual my-4" />

    <div>
      {{ $t('7iUs75tamwipLNljQf8B2') }}
    </div>

    <AButton
      class="ant-cover__Button-3d-primary mt-5"
      type="primary" block
      @click="emits('close');"
    >
      {{ $t('pFexkGv2pL4Nl4GmT9ZZm') }}
    </AButton>
  </div>
</template>
